<template>
  <div class="flexC positionR"  :style="{ height: height }">
    <div class="echart_box" :style="{ height: height }"></div>
  </div>
</template>

<script>
export default {
  name: "ColumnEchartView3",
  props: {
    barWidth: {
      type: String,
      default: "3",
    },
    height: {
      type: String,
      default: "98%",
    },
    colors: {
      type: Array,
      default() {
        return [];
      },
    },
    topNum: {
      type: Boolean,
      default: false,
    },
    arrX: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY2: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY3: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY4: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY5: {
      type: Array,
      default() {
        return [];
      },
    },
    legendData: {
      type: Array,
      default() {
        return ["", ""];
      }
    },
    rotate: {
      type: Number,
      default: 0,
    }, //旋转角度
    dw: {
      type: String,
      default: ''
    },
    dw2: {
      type: String,
      default: ''
    }
  },
  watch: {
    barWidth: function(val) {
      this.barWidth = val
    },
    dw: function(val) {
      this.dw = val
    },
    dw2: function(val) {
      this.dw2 = val
    },
    rotate: function(val) {
      this.rotate = val
    },
    colors: function(val) {
      this.colors = val;
    },
    topNum: function(val) {
      this.topNum = val
    },
    arrX: function(val) {
      this.arrX = val;
    },
    height: function(val) {
      this.height = val;
    },
    arrY2: function(val) {
      this.arrY2 = val;
    },
    arrY3: function(val) {
      this.arrY3 = val;
    },
    arrY4: function(val) {
      this.arrY4 = val;
    },
    arrY5: function(val) {
      this.arrY5 = val;
    },
    arrY: function(val) {
      this.arrY = val;
      this.columnEchartsInit(
        this.arrX,
        this.arrY,
        this.arrY2,
        this.arrY3,
        this.arrY4,
        this.arrY5,
        this.legendData,
      );
    },
  },
  mounted() {
    this.columnEchartsInit(
      this.arrX,
      this.arrY,
      this.arrY2,
      this.arrY3,
      this.arrY4,
      this.arrY5,
      this.legendData,
    );
  },
  methods: {
    columnEchartsInit(dataX, dataY, dataY2, dataY3, dataY4, dataY5, legendData) {
      let echartElement = this.$echarts.init(this.$el);
      echartElement.clear();
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: '30%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          interval: 90,
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 10
            }
          },
          axisTick: { show: false },
          splitArea: { show: false },
          axisLine: { show: false },
          data: dataX
        },
        yAxis: [
          {
            type: 'value',
            /*min: 0,
            max: 80000,*/
            axisLine: { lineStyle: { color: 'rgb(255,255,255)' } },
            axisTick: { lineStyle: { color: 'rgb(255,255,255)' } },
            splitLine: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              formatter: '{value}'
            }
          }
        ],
        color: ['#ff5719', '#face35', '#00B3FF'],
        series: [{
          type: 'bar',
          name: legendData[0],
          barWidth: 10,
          data: dataY3
        }, {
          type: 'bar',
          name: legendData[1],
          barWidth: 10,
          data: dataY2
        }, {
          type: 'bar',
          name: legendData[2],
          barWidth: 10,
          data: dataY
        }]
      }
      echartElement.setOption(option);
      window.addEventListener("resize", () => {
        echartElement.resize();
      });
    },
  },
};
</script>

<style scoped>
.echart_box {
  width: 98%;
  margin: 0 auto;
}

.pCharImage {
  width: 2.625rem;
  height: 1.75rem;
  margin-left: 1rem;
}
</style>
